<template>
  <div class="com-filter">
    <div class="filter-title">{{ props.title }}：</div>
    <ul class="filter-tabs">
      <li v-for="(item, index) of props.list" :key="index" @click="tabChange(item.id)" :class="{active: flag.includes(item.id)}">{{ item.labels }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  list: {
    type: Array,
    default: () => []
  }
});
const flag = ref<string[]>([]);
const emits =defineEmits(['select'])

function tabChange(id: string) {
  if (flag.value.includes(id)) {
    flag.value = flag.value.filter((inx) => inx !== id)
  } else {
    flag.value.push(id)
  }
  emits('select', flag.value)
}

defineComponent({name: 'ComFilter'})
</script>

<style scoped lang="scss">
.com-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .filter-title {
    margin-right: 50px;
    font-weight: 700;
    font-size: 16px;
    color: #2E3244;
  }

  .filter-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    color: #2E3244;

    li {
      height: 42px;
      margin-right: 10px;
      padding: 0 25px;
      line-height: 42px;
      cursor: pointer;

      &.active {
        color: #fff;
        border-radius: 2px;
        background: linear-gradient( 296deg, #FF4350 0%, #FF4553 35%, #FFADB3 100%);
      }
    }
  }
}
</style>
